﻿@using Models;
@model List<question>
@{
    ViewBag.Title = "调研";
    Layout = "~/Areas/Mobile/Views/Shared/_Layout.cshtml";
    List<useranswer> answers = ViewBag.UserAnswers;
    List<area> provinces = ViewBag.Provinces;
    string province = "";
    string city = "";

    var disabled = "";
    if (answers.Count > 0)
    {
        disabled = "disabled=\"disabled\"";
    }
}
<div class="header">
    <img src="~/Areas/Mobile/HTML/images/banner-1.png" />
</div>
<div class="question-box">
    @foreach (var question in Model)
    {
        var type = question.type;

        if (type == "radio" || type == "checkbox")
        {
            <div class="question-item" data-id="@question.id" data-sort="@question.sort" data-type="@type">
                <div class="question-title">
                    <div class="question-sort">
                        <span>@question.sort</span>
                    </div>
                    <div class="question-title-text">@question.title</div>
                </div>
                <ul class="option-list">
                    @foreach (var option in question.options)
                    {
                        var check = answers.Any(o => o.optionid == option.id) ? "checked=\"checked\"" : "";
                        <li>
                            <div class="mui-input-row mui-@type mui-left">
                                <label>@option.name</label>
                                <input class="option-input" name="@question.id" type="@type" value="@option.id" data-isothertext="@option.isothertext" data-name="@option.name" @disabled @check>
                            </div>
                            <input class="othertext hide" name="othertext" type="text" value="" />
                        </li>
                    }
                </ul>
            </div>
        }
        if (type == "textarea")
        {
            var answer = answers.Where(o => o.questionid == question.id).FirstOrDefault() ?? new useranswer();
            <div class="question-item" data-id="@question.id" data-sort="@question.sort" data-type="@type">
                <div class="question-title">
                    <div class="question-sort">
                        <span>@question.sort</span>
                    </div>
                    <div class="question-title-text">@question.title</div>
                </div>
                <ul class="option-list">
                    <li class="textarea-input">
                        <input type="text" name="optionname" value="@answer.optionname" @disabled />
                    </li>
                </ul>
            </div>
        }
        if (type == "select")
        {
            var answer = answers.Where(o => o.questionid == question.id).FirstOrDefault();
            if (answer != null)
            {
                var strs = answer.optionname.Split(new char[] { '-' });
                province = strs[0];
                city = strs[1];
            }
            <div class="question-item" data-id="@question.id" data-sort="@question.sort" data-type="@type">
                <div class="question-title">
                    <div class="question-sort">
                        <span>@question.sort</span>
                    </div>
                    <div class="question-title-text">@question.title</div>
                </div>
                <ul class="option-list">
                    <li class="mui-row">
                        <select class="option-select mui-col-xs-5" name="province" id="province" onchange="GetCity(this)" data-value="@province" @disabled>
                            <option value="">选择省份</option>
                            @foreach (var p in provinces)
                            {
                                <option value="@p.cname">@p.cname</option>
                            }
                        </select>
                        <div class="mui-col-xs-2 mui-text-center" style="line-height:41px;margin: 15px 0;">-</div>
                        <select class="option-select mui-col-xs-5" name="city" id="city" data-value="@city" @disabled>
                            <option value="">选择城市</option>
                        </select>
                    </li>
                </ul>
            </div>
        }
    }
</div>

<div class="container" style="margin-top:30px;margin-bottom:30px;">
    @if (!(answers.Count > 0))
    {
        <button class="btn-block" type="button" onclick="SaveAnswer()">提交</button>
    }
    else
    {
        <p class="mui-text-center" style="color:#650eaf;">感谢您的参与！</p>
    }
</div>

<script>
    var lock = false;
    function SaveAnswer() {
        if (lock) {
            return false;
        }
        else {
            lock = true;
            var valid = true;
            Loading();
            var answers = [];
            var questions = $(".question-item");
            $(".question-item").each(function () {
                var self = $(this);
                var questionid = self.data("id");
                var type = self.data("type");
                if (type == "radio" || type == "checkbox") {
                    var ckdOptions = self.find("input:checked");
                    if (ckdOptions.length == 0) {
                        lock = false;
                        CloseLoading();
                        mui.alert('第' + self.data('sort') + '题未答！');
                        valid = false;
                        return false;
                    }
                    $.each(ckdOptions, function () {
                        var isOtherText = $(this).data("isothertext");
                        var otherText = $(this).parents("div").next(".othertext").val();
                        if (isOtherText == "True" && otherText.length <= 0) {
                            lock = false;
                            CloseLoading();
                            mui.alert('第' + self.data('sort') + '请注明！');
                            valid = false;
                            return false;
                        }
                        answers.push({ questionid: questionid, optionid: $(this).val(), optionname: $(this).data("name"), othertext: otherText });
                    });
                }
                if (type == "textarea") {
                    var answer = $(self).find("input[name='optionname']").val();
                    if (answer.length <= 0) {
                        lock = false;
                        CloseLoading();
                        mui.alert('第' + self.data('sort') + '题未答！');
                        valid = false;
                        return false;
                    }
                    answers.push({ questionid: questionid, optionid: 0, optionname: answer, othertext: "" });
                }
                if (type == "select") {
                    var province = $("#province").val();
                    var city = $("#city").val();
                    if (province.length <= 0) {
                        lock = false;
                        CloseLoading();
                        mui.alert('第' + self.data('sort') + '请选择省份！');
                        valid = false;
                        return false;
                    }
                    if (city.length <= 0) {
                        lock = false;
                        CloseLoading();
                        mui.alert('第' + self.data('sort') + '请选择城市！');
                        valid = false;
                        return false;
                    }
                    answers.push({ questionid: questionid, optionid: 0, optionname: province + "-" + city, othertext: "" });
                }
            });
            if (valid) {
                var data = {
                    answers: JSON.stringify(answers)
                };
                $.ajax({
                    url: '/mobile/survey/answer',
                    type: "POST",
                    data: data,
                    success: function (result) {
                        lock = false;
                        CloseLoading();
                        if (result.status) {
                            mui.alert("提交成功", function () {
                                window.location.href = "/mobile/survey/notopen?msg=感谢您的参与！";
                            });
                        } else {
                            mui.alert(result.errmsg);
                        }
                    }, error: function (e) {
                        mui.alert(e.responseText);
                    }
                });
            }
        }
    }

    function GetCity(target) {
        var province = "";
        if ($(target).val().length > 0) {
            province = $(target).val();
        }
        if ($(target).data("value").length > 0) {
            province = $(target).data("value");
        }
        if (province.length > 0) {
            $.post("/mobile/survey/getcity", { province: province }, function (result) {
                if (result.status) {
                    $("#city").empty().val("").append('<option value="">选择城市</option>');
                    for (var i = 0; i < result.data.length; i++) {
                        $("#city").append('<option value="' + result.data[i].cname + '">' + result.data[i].cname + '</option>');
                    }
                    var selectValue = $("#city").data("value");
                    if (selectValue.length > 0) {
                        $("#city").val(selectValue);
                    }
                }
                else {
                    mui.alert(result.errmsg);
                }
            });
        }
    }
    $(function () {
        GetCity($("#province"));
        SetSelect();
        $(".option-input").on("click", function () {
            var self = $(this);
            var isOtherText = self.data("isothertext");
            if (isOtherText == "True") {
                if (self.is(":checked")) {
                    $(self).parents(".option-list").find(".othertext").hide();
                    $(self).parents("div").next(".othertext").show();
                } else {
                    $(self).parents("div").next(".othertext").hide().val("");
                }
            } else {
                $(self).parents(".option-list").find(".othertext").hide();
                $(self).parents(".option-list").find(".othertext").each(function () {
                    $(this).val("");
                });
            }
        });
    });
    //设置select的选中项（先要给select的data-value赋值，如<select data-value="XX">）

    function SetSelect() {
        $("select").each(function () {
            var selectValue = $(this).data("value");
            $(this).val(selectValue);
        });
    }
</script>
